<template>
    <Cascader :data="datas" v-model="value2" @on-change="cityOnChange"></Cascader>
</template>

<script>
// import { getCityData } from '@/api/city'

export default {
  data () {
    return {
      value2: ['jiangsu', 'suzhou', 'zhuozhengyuan'],
      datas: [{
        value: 'beijing',
        label: '北京',
        children: [
          {
            value: 'gugong',
            label: '故宫'
          },
          {
            value: 'tiantan',
            label: '天坛'
          },
          {
            value: 'wangfujing',
            label: '王府井'
          }
        ]
      }, {
        value: 'jiangsu',
        label: '江苏',
        children: [
          {
            value: 'nanjing',
            label: '南京',
            children: [
              {
                value: 'fuzimiao',
                label: '夫子庙'
              }
            ]
          },
          {
            value: 'suzhou',
            label: '苏州',
            children: [
              {
                value: 'zhuozhengyuan',
                label: '拙政园'
              },
              {
                value: 'shizilin',
                label: '狮子林'
              }
            ]
          }
        ]
      }]
    }
  },
  mounted () {
    this.datas = this.$store.state.app.cityData
  },
  methods: {
    cityOnChange (data) {
      console.log(data)
    }
  }
}
</script>

<style scoped>

</style>
